<template>
  <div class="mytable">
      <el-table :data="tableData" style="width: 100%" :border="tableOption.border" :height="hieght">
      <el-table-column
        v-for="item in tableOption.tableColumn"
        :prop="item.prop":key="item.prop"
        :label="item.label"
        :width="item.width"
        :sortable="item.sortable"
        >
        </el-table-column>
        <el-table-column prop="" label="操作" width="180" v-if="tableOption.isOperation">
          <template #default="scope">
              <slot name="action" :scope="scope"></slot>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="tableOption.isPage" class="page">
        <UnPagination :pageNum="tableOption.pageNum" :pageSize="tableOption.pageSize" :total="tableOption.total" @pageChange="pageChange"></UnPagination>
      </div>
  </div>
</template>
<script setup>
import UnPagination from '@/components/UnPagination/index.vue'
// 接受父组件数据
defineProps({
  tableData:{type:Array,default:[]},
  tableOption:{type:Object,default:()=>{}}
})
const hieght = 'calc(100% - 47px)'
// 子组件通过事件向父组件传值
const emit = defineEmits(['pageChange'])
const pageChange = (val) => {
  emit('pageChange', val)
}
</script>
<style lang="scss" scoped>
.mytable{
  height: 100%;
  .page{
    text-align: right;
    margin-top: 15px;
  }
}
</style>
